<template>
  <div class="chat-view">
    <header>{{ title }}</header>

    <div class="chat-area" ref="chatArea">
      <div
        v-for="(msg, index) in messages"
        :key="index"
        class="message"
        :class="msg.role"
      >
        <div class="bubble">{{ msg.content }}</div>
      </div>
    </div>

    <div class="input-area">
      <input
        v-model="inputMessage"
        @keyup.enter="handleSend"
        placeholder="输入消息..."
      />
      <button @click="handleSend">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { useEventSource } from '../utils/useEventSource';
import { API_BASE } from '../utils/constants';

const props = defineProps({
  chatApi: { type: String, required: true },
  needChatId: { type: Boolean, default: false },
  title: { type: String, default: '' }
});

// 生成随机 chatId
function genChatId() {
  return `chat_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
}

const chatId = props.needChatId ? genChatId() : '';
const messages = ref([]);
const inputMessage = ref('');
const chatArea = ref(null);

function scrollToBottom() {
  nextTick(() => {
    if (chatArea.value) {
      chatArea.value.scrollTop = chatArea.value.scrollHeight;
    }
  });
}

watch(messages, scrollToBottom);

function handleSend() {
  const text = inputMessage.value.trim();
  if (!text) return;
  // 添加用户消息
  messages.value.push({ role: 'user', content: text });
  inputMessage.value = '';
  openStream(text);
}

function openStream(text) {
  let url = `${API_BASE}${props.chatApi}?message=${encodeURIComponent(text)}`;
  if (props.needChatId) {
    url += `&chatId=${chatId}`;
  }
  const { eventSource } = useEventSource(url, (data, done) => {
    // 累计 AI 消息流式返回内容
    if (
      messages.value.length === 0 ||
      messages.value[messages.value.length - 1].role !== 'ai'
    ) {
      messages.value.push({ role: 'ai', content: data });
    } else {
      messages.value[messages.value.length - 1].content += data;
    }

    if (done) {
      eventSource.close();
    }
  });
}
</script>

<style scoped>
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  background: #42b983;
  color: #fff;
}
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #f5f5f5;
}
.message {
  display: flex;
  margin-bottom: 10px;
}
.message.user {
  justify-content: flex-end;
}
.message.ai {
  justify-content: flex-start;
}
.bubble {
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  word-break: break-word;
}
.message.user .bubble {
  background: #42b983;
  color: #fff;
}
.input-area {
  display: flex;
  padding: 1rem;
  border-top: 1px solid #ddd;
}
input {
  flex: 1;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  margin-left: 10px;
  padding: 8px 16px;
  background: #42b983;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
</style> 